<template>
  <!--自我介绍-->
  <view>
    <myHead
      :title="title"
      :right="true"
      text_right="保存"
      @clickRight="clickRight"
    ></myHead>
    <view class="conten">
      <view class="fl-lr-c box-list">
        <u--textarea
          style="width: 100%"
          v-model="textarea"
          border="bottom"
          placeholder="请输入自我介绍"
          count
          :height="155"
          :maxlength="600"
        />
      </view>
      <view class="fl-lr-c box-list">
        <view>图片：</view>
        <view class="imgsdss">
          <u-upload
            accept="image"
            :fileList="fileList5"
            @afterRead="afterRead"
            @delete="deletePic"
            @oversize="oversize"
            name="5"
            :maxCount="3"
            :maxSize="maxsize"
          >
          </u-upload>
        </view>
      </view>
      <view class="fl-lr-c box-list" v-if="GoodAtVideo">
        <view>视频封面：</view>
        <view class="imgsdss">
          <u-upload
            accept="image"
            :fileList="fileList2"
            @afterRead="afterRead2"
            @delete="deletePic2"
            @oversize="oversize"
            name="5"
            :maxCount="1"
            :maxSize="maxsize"
          >
          </u-upload>
        </view>
      </view>
      <view class="fl-lr-c box-list">
        <view>视频：</view>
        <view class="imgsdss">
          <u-upload
            accept="video"
            @afterRead="uploadAvatar"
            @delete="deletePicuploadAvatar"
            :maxSize="videomaxsize"
            :maxDuration="1200"
            :maxCount="1"
            v-if="!GoodAtVideo"
          >
          </u-upload>
        </view>
      </view>
      <view class="imgest" v-if="GoodAtVideo">
        <view style="text-align: center">
          <video
            :src="videolist"
            style="width: 90%; height: 300rpx; border-radius: 20rpx"
          ></video>
        </view>
        <view class="viewgtxc" @click="deletePicuploadAvatar">
          <u-icon name="close" color="#000"></u-icon>
        </view>
      </view>
    </view>
    <bottomBut @bottomBut="bottomBut" v-if="type == 2"></bottomBut>
  </view>
</template>

<script>
import myHead from "@/pages/component/baseHead.vue";
import bottomBut from "@/pages/component/bottomBut.vue";
export default {
  data() {
    return {
      fileList: "",
      URL: this.$config.domain.staticUrl,
      title: "自我介绍",
      type: 0, //1add  2编辑
      textarea: "",
      GoodAtVideo: "",
      GoodAtImage: [],
      headImg: [],
      // 当前id
      Id: 0,
      // 父id
      fuid: 0,
      maxsize: "31457280", //图片大小限制
      videomaxsize: "314572800", //视频大小限制
    };
  },
  //子组件
  components: {
    myHead,
    bottomBut,
  },
  onLoad(o) {
    this.type = o.type;
    this.fuid = o.fuid;
    if (this.type == 2) {
      let sto = JSON.parse(o.data);
      console.log(sto);
      this.Id = sto.ResumeId;
      this.textarea = sto.GoodAt || "";
      if (sto.GoodAtImages) {
        this.headImg = sto.GoodAtImages.split(",");
      }
      this.GoodAtVideo = sto.GoodAtVideo[0].VideoPath;
      this.GoodAtImage = sto.GoodAtVideo[0] ? [sto.GoodAtVideo[0].ImgPath] : [];
    }
  },
  computed: {
    fileList5() {
      return this.headImg.map((res) => {
        return {
          url: this.URL + res,
        };
      });
    },
    fileList2() {
      return this.GoodAtImage.map((res) => {
        return {
          url: this.URL + res,
        };
      });
    },
    videolist() {
      return this.URL + this.GoodAtVideo;
    },
  },
  // 计算方法
  methods: {
    Videooversize(file, lists, name) {
      if (file.file.size > this.videomaxsize) {
        this.$util.toast("视频大小限制300M");
      }
    },
    // 图片大小超出限制
    oversize(file, lists, name) {
      if (file.file.size > this.maxsize) {
        this.$util.toast("图片大小限制3M");
      }
    },
    // 上传 图片
    afterRead(file, lists, name) {
      let that = this;
      let tempFilePaths = file.file;
      uni.uploadFile({
        url: this.$config.domain.baseUrl + "/api/core/file/upload",
        filePath: tempFilePaths.url,
        name: "file",
        header: {
          Authorization:
            uni.getStorageSync("access_token").token_type +
            " " +
            uni.getStorageSync("access_token").access_token,
        },
        success: (res) => {
          console.log("res", res);
          if (res.statusCode == 200) {
            let data = JSON.parse(res.data);
            if (data.Success) {
              that.headImg.push(data.Result.Path);
            }
          }
        },
        fail: (err) => {
          console.log("失败", err);
        },
      });
    },
    // 删除图片
    deletePic(file, lists, name) {
      this.headImg.splice(file.index, 1);
    },
    //上传 视频
    uploadAvatar(file, lists, name) {
      let that = this;
      let tempFilePaths = file.file;
      if (Number(tempFilePaths.size) > this.videomaxsize) {
        this.$util.toast("视频最大上传300M");
        return;
      } else {
        that.$util
          .AuploadFile({
            src: tempFilePaths.url,
          })
          .then((res) => {
            if (res.Success) {
              that.GoodAtVideo = res.Result.Path;
            }
          });
      }
    },
    // 删除视频
    deletePicuploadAvatar(file, lists, name) {
      this.GoodAtVideo = "";
    },
    // 上传视频封面
    afterRead2(file, lists, name) {
      uni.uploadFile({
        url: this.$config.domain.baseUrl + "/api/core/file/upload",
        filePath: file.file.url,
        name: "file",
        header: {
          Authorization:
            uni.getStorageSync("access_token").token_type +
            " " +
            uni.getStorageSync("access_token").access_token,
        },
        success: (res) => {
          if (res.statusCode == 200) {
            let data = JSON.parse(res.data);
            if (data.Success) {
              this.GoodAtImage = [data.Result.Path];
            }
          }
        },
      });
    },
    // 删除视频封面
    deletePic2(file, lists, name) {
      this.GoodAtImage.splice(file.index, 1);
    },
    bottomBut() {
      let that = this;
      uni.showModal({
        title: "删除提示",
        content: "确认要删除这条数据",
        success: function (res) {
          if (res.confirm) {
            that.$http.huirc
              .resumjobup({
                Id: that.Id,
                GoodAt: "",
                GoodAtVideo: "",
                GoodAtImages: "",
              })
              .then((res) => {
                if (res.Success) {
                  that.$util.toast("删除成功");
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 1000);
                }
              });
          }
        },
      });
    },
    clickRight() {
      if (!this.textarea.length) {
        this.$util.toast("请输入自我介绍");
        return;
      }
      let data = {
        Id: this.fuid,
        GoodAt: this.textarea,
        GoodAtVideo: this.GoodAtVideo
          ? [
              {
                ImgPath: this.GoodAtImage[0],
                VideoPath: this.GoodAtVideo,
              },
            ]
          : [],
        GoodAtImages: this.headImg.toString(),
      };
      this.$http.huirc.resumjobup(data).then((res) => {
        if (res.Success) {
          this.$util.toast("保存成功");
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-list {
  box-sizing: border-box;
  padding: 20rpx;
  background-color: #fff;
  .imgsdss {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
}

.imgest {
  width: 100%;
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  background-color: #fff;
  margin-bottom: 1px;
  text-align: center;
  position: relative;

  .viewgtxc {
    position: absolute;
    right: 30rpx;
    top: 20rpx; // top: 50rpx;
    // z-index: 999;
  }
}
</style>